// SCSS 变量定义文件

// 颜色系统
$color-primary: #409eff;
$color-primary-light-1: #53a8ff;
$color-primary-light-2: #66b1ff;
$color-primary-light-3: #79bbff;
$color-primary-light-4: #8cc5ff;
$color-primary-light-5: #a0cfff;
$color-primary-light-6: #b3d8ff;
$color-primary-light-7: #c6e2ff;
$color-primary-light-8: #d9ecff;
$color-primary-light-9: #ecf5ff;
$color-primary-dark-2: #337ecc;

$color-success: #67c23a;
$color-success-light-1: #85ce61;
$color-success-light-2: #95d475;
$color-success-light-3: #a4da89;
$color-success-light-4: #b3e19d;
$color-success-light-5: #c2e7b0;
$color-success-light-6: #d1edc4;
$color-success-light-7: #e1f3d8;
$color-success-light-8: #f0f9eb;
$color-success-light-9: #f0f9eb;
$color-success-dark-2: #529b2e;

$color-warning: #e6a23c;
$color-warning-light-1: #ebb563;
$color-warning-light-2: #efc274;
$color-warning-light-3: #f3cf85;
$color-warning-light-4: #f7dc96;
$color-warning-light-5: #fae9a7;
$color-warning-light-6: #fdf6b8;
$color-warning-light-7: #fdf6b8;
$color-warning-light-8: #fdf6b8;
$color-warning-light-9: #fefce8;
$color-warning-dark-2: #b88230;

$color-danger: #f56c6c;
$color-danger-light-1: #f78989;
$color-danger-light-2: #f89898;
$color-danger-light-3: #f9a7a7;
$color-danger-light-4: #fab6b6;
$color-danger-light-5: #fbc4c4;
$color-danger-light-6: #fcd3d3;
$color-danger-light-7: #fde2e2;
$color-danger-light-8: #fef0f0;
$color-danger-light-9: #fef0f0;
$color-danger-dark-2: #c45656;

$color-info: #909399;
$color-info-light-1: #a6a9ad;
$color-info-light-2: #b1b3b8;
$color-info-light-3: #bcbec2;
$color-info-light-4: #c8c9cc;
$color-info-light-5: #d3d4d6;
$color-info-light-6: #dedfe0;
$color-info-light-7: #e9e9eb;
$color-info-light-8: #f4f4f5;
$color-info-light-9: #f4f4f5;
$color-info-dark-2: #73767a;

// 文本颜色
$text-color-primary: #303133;
$text-color-regular: #606266;
$text-color-secondary: #909399;
$text-color-placeholder: #a8abb2;
$text-color-disabled: #c0c4cc;

// 背景颜色
$bg-color: #ffffff;
$bg-color-page: #f2f3f5;
$bg-color-light: #f5f7fa;
$bg-color-lighter: #fafafa;
$bg-color-extra-light: #fafcff;
$bg-color-dark: #ebeef5;
$bg-color-darker: #e4e7ed;

// 边框颜色
$border-color: #dcdfe6;
$border-color-light: #e4e7ed;
$border-color-lighter: #ebeef5;
$border-color-extra-light: #f2f6fc;
$border-color-dark: #d4d7de;
$border-color-darker: #cdd0d6;

// 字体
$font-family-base: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
$font-family-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;

// 字体大小
$font-size-extra-large: 20px;
$font-size-large: 18px;
$font-size-medium: 16px;
$font-size-base: 14px;
$font-size-small: 13px;
$font-size-extra-small: 12px;

// 行高
$line-height-base: 1.5;
$line-height-small: 1.2;
$line-height-large: 1.8;

// 字重
$font-weight-light: 300;
$font-weight-normal: 400;
$font-weight-medium: 500;
$font-weight-bold: 700;

// 间距
$spacing-xs: 4px;
$spacing-sm: 8px;
$spacing-md: 16px;
$spacing-lg: 24px;
$spacing-xl: 32px;
$spacing-xxl: 48px;

// 边框半径
$border-radius-base: 4px;
$border-radius-sm: 2px;
$border-radius-lg: 8px;
$border-radius-xl: 12px;
$border-radius-round: 20px;
$border-radius-circle: 50%;

// 阴影
$box-shadow-base: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
$box-shadow-dark: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.12);
$box-shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
$box-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
$box-shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.15), 0 4px 10px rgba(0, 0, 0, 0.1);

// 过渡动画
$transition-base: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
$transition-fade: opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1);
$transition-md-fade: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1);
$transition-border: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
$transition-box-shadow: box-shadow 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
$transition-color: color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);

// Z-index 层级
$z-index-normal: 1;
$z-index-top: 1000;
$z-index-popper: 2000;
$z-index-dialog: 3000;
$z-index-message: 4000;
$z-index-loading: 5000;

// 断点
$breakpoint-xs: 480px;
$breakpoint-sm: 576px;
$breakpoint-md: 768px;
$breakpoint-lg: 992px;
$breakpoint-xl: 1200px;
$breakpoint-xxl: 1600px;

// 容器
$container-max-width: 1200px;
$container-padding: 20px;
$container-padding-tablet: 16px;
$container-padding-mobile: 12px;

// 头部
$header-height: 80px;
$header-height-mobile: 60px;
$header-bg: #ffffff;
$header-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

// 侧边栏
$sidebar-width: 240px;
$sidebar-width-collapsed: 64px;
$sidebar-bg: #001529;
$sidebar-text-color: rgba(255, 255, 255, 0.65);
$sidebar-text-color-active: #ffffff;

// 底部
$footer-height: 200px;
$footer-bg: #001529;
$footer-text-color: rgba(255, 255, 255, 0.65);

// 表单
$form-item-margin-bottom: 22px;
$form-label-font-size: $font-size-base;
$form-label-color: $text-color-regular;

// 按钮
$button-font-size: $font-size-base;
$button-border-radius: $border-radius-base;
$button-padding-vertical: 12px;
$button-padding-horizontal: 20px;
$button-font-weight: $font-weight-medium;

// 输入框
$input-height: 40px;
$input-padding-horizontal: 15px;
$input-font-size: $font-size-base;
$input-border-color: $border-color;
$input-border-radius: $border-radius-base;
$input-bg-color: $bg-color;

// 表格
$table-border-color: $border-color-lighter;
$table-header-bg: $bg-color-light;
$table-row-hover-bg: $bg-color-lighter;
$table-cell-padding: 12px 8px;

// 卡片
$card-border-radius: $border-radius-lg;
$card-padding: 20px;
$card-shadow: $box-shadow-light;
$card-border-color: $border-color-light;

// 标签
$tag-padding: 0 10px;
$tag-height: 32px;
$tag-font-size: $font-size-small;
$tag-border-radius: $border-radius-base;

// 徽章
$badge-size: 18px;
$badge-font-size: $font-size-extra-small;
$badge-font-weight: $font-weight-bold;

// 分页
$pagination-button-size: 32px;
$pagination-button-color: $text-color-regular;
$pagination-button-disabled-color: $text-color-placeholder;
$pagination-hover-color: $color-primary;

// 加载
$loading-spinner-size: 42px;
$loading-fullscreen-spinner-size: 50px;

// 消息提示
$message-padding: 15px 15px 15px 20px;
$message-border-radius: $border-radius-base;
$message-close-size: 16px;
$message-close-icon-size: 14px;

// 通知
$notification-width: 330px;
$notification-padding: 14px 26px 14px 13px;
$notification-border-radius: $border-radius-lg;
$notification-shadow: $box-shadow-light;

// 对话框
$dialog-border-radius: $border-radius-lg;
$dialog-box-shadow: $box-shadow-lg;
$dialog-title-font-size: $font-size-large;
$dialog-content-font-size: $font-size-base;

// 抽屉
$drawer-bg: $bg-color;
$drawer-box-shadow: 0 8px 10px -5px rgba(0, 0, 0, 0.2), 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12);

// 工具提示
$tooltip-max-width: 250px;
$tooltip-color: $bg-color;
$tooltip-bg-color: $text-color-primary;
$tooltip-border-radius: $border-radius-base;
$tooltip-padding: 10px;

// 气泡确认框
$popconfirm-border-radius: $border-radius-base;
$popconfirm-inner-padding: 12px;

// 进度条
$progress-border-radius: 100px;
$progress-height: 6px;
$progress-font-size: $font-size-extra-small;

// 上传
$upload-dragger-padding: 40px;
$upload-dragger-border-radius: $border-radius-lg;

// 时间线
$timeline-node-size-normal: 12px;
$timeline-node-size-large: 14px;
$timeline-node-color: $border-color-light;

// 步骤条
$steps-border-radius: $border-radius-base;
$steps-padding: 20px;

// 骨架屏
$skeleton-color: #f2f2f2;
$skeleton-to-color: #e6e6e6;

// 空状态
$empty-padding: 40px 0;
$empty-image-size: 160px;
$empty-description-margin-top: 16px;

// 结果页
$result-padding: 48px 32px;
$result-icon-font-size: 72px;
$result-title-font-size: 24px;
$result-subtitle-margin-top: 12px;
$result-extra-margin-top: 24px;

// 统计数值
$statistic-title-font-size: $font-size-base;
$statistic-content-font-size: 24px;
$statistic-content-font-weight: $font-weight-bold;

// 描述列表
$descriptions-header-padding: 16px;
$descriptions-title-font-size: $font-size-large;
$descriptions-item-padding: 16px;
$descriptions-item-trailing-colon-margin: 0 8px 0 2px;
$descriptions-item-label-colon-margin-right: 8px;

// 自定义业务变量
$hero-section-height: 600px;
$hero-section-height-mobile: 400px;
$section-padding: 80px 0;
$section-padding-mobile: 40px 0;

// 产品卡片
$product-card-width: 300px;
$product-card-height: 400px;
$product-card-border-radius: $border-radius-lg;
$product-card-shadow: $box-shadow-light;

// 团队成员卡片
$team-card-size: 200px;
$team-card-border-radius: $border-radius-xl;

// 客户案例
$case-card-height: 300px;
$case-card-border-radius: $border-radius-lg;

// 联系表单
$contact-form-max-width: 600px;
$contact-form-padding: 40px;

// 服务特色
$feature-icon-size: 64px;
$feature-card-padding: 30px;
$feature-card-border-radius: $border-radius-lg;

// 技术栈
$tech-stack-item-size: 80px;
$tech-stack-item-border-radius: $border-radius-lg;

// FAQ
$faq-item-padding: 20px;
$faq-item-border-radius: $border-radius-base;

// 时间轴
$timeline-item-padding: 20px 0;
$timeline-line-width: 2px;
$timeline-dot-size: 12px;

// 价格卡片
$pricing-card-width: 280px;
$pricing-card-padding: 40px 30px;
$pricing-card-border-radius: $border-radius-xl;

// 统计数据
$stats-item-padding: 30px;
$stats-number-font-size: 48px;
$stats-label-font-size: $font-size-base;

// 合作伙伴
$partner-logo-height: 60px;
$partner-logo-filter: grayscale(100%);

// 新闻资讯
$news-card-height: 350px;
$news-image-height: 200px;
$news-content-padding: 20px;

// 搜索
$search-input-height: 48px;
$search-button-width: 120px;

// 筛选器
$filter-item-margin: 8px;
$filter-tag-padding: 6px 12px;

// 分类导航
$category-nav-height: 60px;
$category-item-padding: 0 20px;

// 面包屑
$breadcrumb-font-size: $font-size-small;
$breadcrumb-separator-margin: 0 8px;

// 回到顶部
$back-top-size: 50px;
$back-top-size-mobile: 45px;
$back-top-bottom: 30px;
$back-top-right: 30px;
$back-top-bottom-mobile: 20px;
$back-top-right-mobile: 20px;